<template>
    <show-modal :title="options.title" :loading="options.loading" width="440px" @cancel="cancel" @submit="submit">
        <a-form ref="formRef" :model="form" :rules="rules" v-bind="layout">
            <a-form-item label="字典名称" name="name">
                <a-input v-model:value="form.name" placeholder="请填写字典名称" />
            </a-form-item>
            <a-form-item label="字典编码" name="code">
                <a-input v-model:value="form.code" :disabled="form.id ? true : false" placeholder="请填写字典编码" />
            </a-form-item>
        </a-form>
    </show-modal>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import { rules } from './rules'
import { IDictType } from '../dict.type';
import { add, update } from '@/api/system/dict/type';
import { message } from 'ant-design-vue';

let props = defineProps({
    info: {
        type: Object,
        default: () => null
    }
})


let emit = defineEmits(['cancel', 'submit']);
// /**基本配置 */
const options = reactive({
    title: '编辑字典',
    loading: false
})

const layout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 19 },
};
/**表单 */
let form = reactive<IDictType>({
    name: '',
    code: ''
});

props.info && Object.assign(form,props.info)
const formRef = ref();
// 提交
const submit = async () => {
    formRef.value
        .validate()
        .then(async () => {
            try {
                if(form.id){
                    await update(toRaw(form));
                }else{
                    await add(toRaw(form));
                }
                message.success('操作成功');
                emit('submit');
            } finally {
            }
        })
        .catch((error: any) => {
            console.log('error', error);
        });
}
//取消
const cancel = () => {
    emit('cancel')
}
</script>